<template>
  <div class="user-profile-container">
    <el-card shadow="hover" class="user-profile-card">
      <el-form label-width="100px" label-position="top">
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="api/powerUser/imgLoad"
            :on-success="handleAvatarSuccess"
            :show-file-list="false"
            :headers="customHeaders"
          >
            <img v-if="param.imgSrc" :src="param.imgSrc" class="avatar-img" />
            <div v-else class="avatar-placeholder">
              <i class="el-icon-plus avatar-icon"></i>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="账号">
          <el-input v-model="param.username" disabled></el-input>
        </el-form-item>

        <el-form-item label="真实姓名">
          <el-input v-model="param.realName" disabled></el-input>
        </el-form-item>

        <el-form-item label="状态">
          <el-switch v-model="param.locked" :active-value="0" :inactive-value="1" active-text="启用" inactive-text="未启用"></el-switch>
        </el-form-item>

        <el-form-item label="联系方式">
          <el-input v-model="param.phone"></el-input>
        </el-form-item>

        <el-form-item label="注册日期">
          <el-input v-model="param.createdTime" disabled></el-input>
        </el-form-item>

        <el-button type="primary" icon="el-icon-edit" circle @click="updateBtn"></el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      param: {}, // 存储用户信息
      token: '', // 初始化 token
      customHeaders: {}
    };
  },
  methods: {
    queryAll() {
      this.$axios.get('api/powerUser/queryById/' + this.param.id)
        .then((response) => {
          if (response.data.code === 200) {
            this.param = response.data.data;
          }
        })
        .catch(() => {
          this.$message.error('请求错误');
        });
    },

    updateBtn() {
      this.$axios.post('api/powerUser/updatePerson', this.param)
        .then((response) => {
          if (response.data.code === 200) {
            this.$message.success('更新成功');
            this.queryAll(); // 更新后重新查询最新信息
          } else {
            this.$message.error('更新失败');
          }
        })
        .catch(() => {
          this.$message.error('请求错误');
        });
    },


    handleAvatarSuccess(response) {
      console.log(response); 
      if (response.code === 200) {
        this.param.imgSrc = response.data; // 上传成功后的图片路径
        this.updateUserImg();
        this.$router.replace({  
              path: this.$route.path,  // 保持当前路径  
              query: { ...this.$route.query, 'lujin': this.param.imgSrc }  // 更新查询参数  
            });
            window.location.reload();
      } else {
        this.$message.error('上传失败');
      }
    },

    updateUserImg() {
      this.$axios.post('api/powerUser/updateImg', this.param)
        .then((response) => {
          if (response.data.code === 200) {
            this.queryAll();
            this.$message.success('头像更新成功');
          } else {
            this.$message.error('头像更新失败');
          }
        })
        .catch(() => {
          this.$message.error('请求错误');
        });
    },
  },

  created() {
    const userInfo = localStorage.getItem('userInfo');
    this.param = userInfo ? JSON.parse(userInfo) : {};

    this.token = localStorage.getItem('authorization'); // 从本地存储中获取 JWT 令牌    
    this.customHeaders = {"authorization": this.token}

    this.queryAll();
    
  },
};
</script>


<style scoped>
/* 保持样式不变 */
.user-profile-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 88vw;
  padding: 5px 40px;
  box-sizing: border-box;
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
}

.user-profile-card {
  width: 100%;
  max-width: 1600px;
  padding: 5px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.avatar-uploader {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px dashed #d9d9d9;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 10px auto;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background-color: #f0f0f0;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-placeholder {
  font-size: 32px;
  color: #8c939d;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-icon {
  color: #409eff;
  font-size: 32px;
}

.el-form-item {
  margin-bottom: 8px;
}

.el-input {
  background: #f9f9f9;
  border-radius: 4px;
}

.el-input[disabled] {
  background-color: #fafafa;
  color: #999;
  cursor: not-allowed;
}
</style>
